<template>
  <div class="home">
    <header>许愿墙</header>
    <div>
      <input type="text" v-model="msg" />
      <ul>
        <li
          v-for="item in 5"
          :class="item == checkIndex ? 'active' : ''"
          @click="checkIndex = item"
        >
          <img :src="require(`../assets/img${item}.jpg`)" alt="" />
        </li>
      </ul>
      <button
        class="send"
        :style="{ background: checkIndex == null ? '#666' : 'green' }"
        :disabled="checkIndex == null ? true : false"
        @click="send"
      >
        {{ checkIndex == null ? "再想想" : "许愿" }}
      </button>
    </div>
    <div class="count">
      <div
        v-drag
        v-for="(item, index) in msgList"
        :key="index"
        class="item"
        :style="{
          backgroundImage: `url(${require(`../assets/img${item.img}.jpg`)})`,
          top: item.top,
          left: item.left,
          zIndex: item.zIndex,
        }"
      >
        {{ item.msg }}
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
  data() {
    return {
      msg: "",
      checkIndex: null, // 选中的图片
      url: "url(../assets/img1.jpg)",
      msgList: [], // 许愿的数组
    };
  },
  methods: {
    send() {
      // 发布消息
      if (this.msg) {
        let top = parseInt(Math.random() * 392); // 随机一个y坐标
        let left = parseInt(Math.random() * 305); // 随机一个x坐标
        let zIndex = parseInt(Math.random() * 1000); // 随机一个x坐标
        this.msgList.push({
          img: this.checkIndex,
          msg: this.msg,
          top: top + "px",
          left: left + "px",
          zIndex: zIndex,
        });
      } else {
        alert("请填写消息");
      }
    },
  },
  directives: {
    drag: {
      bind(el, binding) {
        let maxW = document.documentElement.clientWidth; // 最大宽度
        let maxH = document.querySelector(".count").clientHeight; // 最大高度
        let startX = 0,
          startY = 0; // 手指按下的位置，相对于盒子
        el.ontouchstart = function (e) {
          startX = e.targetTouches[0].pageX - this.offsetLeft;
          startY = e.targetTouches[0].pageY - this.offsetTop;
          el.ontouchmove = function (e) {
            let leftX = e.targetTouches[0].pageX - startX;
            let topY = e.targetTouches[0].pageY - startY;
            if (leftX <= 0) {
              leftX = 0;
            }

            if (leftX >= maxW - 70) {
              leftX = maxW - 70;
            }

            if (topY <= 0) {
              topY = 0;
            }

            if (topY >= maxH - 70) {
              topY = maxH - 70;
            }
            this.style.left = leftX + "px";
            this.style.top = topY + "px";
          };
        };
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
}
.item {
  height: 70px;
  width: 70px;
  position: absolute;
  background-size: 100% 100%;
}
header {
  height: 50px;
  background: rgb(219, 34, 219);
  color: #fff;
  line-height: 50px;
  text-align: center;
}
.send {
  margin: 0 auto;
  display: block;
  padding: 3px 10px;
  border: none;
}
ul {
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
  img {
    height: 60px;
    width: 60px;
  }
  .active {
    border: 3px solid pink;
  }
}
input {
  height: 25px;
  width: 80%;
  margin-top: 10px;
}
.count {
  height: calc(100% - 205px);
  position: relative;
}
</style>
